<template>
  <div class="rights">
    <BreadCrumb :item="['权限管理', '权限列表']"></BreadCrumb>
    <!-- 主体 -->
    <el-card class="box-card">
      <el-table :data="rolesList" border style="width: 100%" :stripe="true">
        <el-table-column type="index" width="48"> </el-table-column>
        <el-table-column prop="authName" label="权限名称"> </el-table-column>
        <el-table-column prop="path" label="路径"> </el-table-column>
        <el-table-column prop="level" label="权限等级" fixed="right">
          <template #default="{ row }">
            <span class="root-level" :style="rootLevel[row.level]['style']">{{
              rootLevel[row.level]['text']
            }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getRolesList } from '@/api/role'
export default {
  name: 'Rights',
  data() {
    return {
      rolesList: [],
      rootLevel: {
        0: {
          text: '一级',
          style: {
            'background-color': '#d9ecff',
            color: '#409eff',
          },
        },
        1: {
          text: '二级',
          style: {
            'background-color': '#f0f9eb',
            color: '#67c23a',
          },
        },
        2: {
          text: '三级',
          style: {
            'background-color': '#fdf6ec',
            color: '#e6a23c',
          },
        },
      },
    }
  },
  methods: {
    async initRolesList() {
      const res = await getRolesList()
      // console.log(res)
      this.rolesList = res.data
    },
  },
  created() {
    this.initRolesList()
  },
}
</script>

<style lang="less" scoped>
.root-level {
  display: inline-block;
  height: 32px;
  padding: 0 10px;
  line-height: 32px;
  font-size: 12px;
  border-radius: 4px;
}
</style>
